import { GitCompareArrows } from 'lucide-react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Suspense } from 'react';
import { Bars } from '@/components/charts/bars';
import { LineChart } from '@/components/charts/line-chart';
import { WorldMap } from '@/components/charts/world-map';
import { CompanyHeader, DensityStrip } from '@/components/company/company-header';
import { CompanyMiniList } from '@/components/company/company-table';
import { MetricTiles } from '@/components/company/metric-tiles';
import { ConfidenceLegend, HistoryPanel, JobsPanel, LocationsPanel, PeoplePanel, PricingPanel, ProductsPanel, SensorsTable, SignalsPanel, TimelinePanel } from '@/components/company/panels';
import { CorporateStructurePanel, KeyFactsPanel } from '@/components/company/profile-panels';
import { EventList } from '@/components/events/event-row';
import { Chip } from '@/components/ui/badges';
import { KV, Row } from '@/components/ui/key-value';
import { Container, Empty, Note } from '@/components/ui/section';
import { TabPanel, Tabs } from '@/components/ui/tabs';
import { api, ApiError, safe } from '@/lib/api';
import { fmtDate, fmtPct, humanize } from '@/lib/format';
import { bool, str, type SP } from '@/lib/params';
import { sourceFor } from '@/lib/profile';
import { routes, SURFACE_LABELS } from '@/lib/site';
import type { CompanyDetail, MapBucket } from '@/lib/types';

export const revalidate = 120;

const TABS = [
  { id: 'overview', label: 'Overview' },
  { id: 'timeline', label: 'Timeline' },
  { id: 'signals', label: 'Signals' },
  { id: 'jobs', label: 'Jobs' },
  { id: 'products', label: 'Products' },
  { id: 'pricing', label: 'Pricing' },
  { id: 'locations', label: 'Locations' },
  { id: 'leadership', label: 'Leadership' },
  { id: 'sources', label: 'Sources' },
  { id: 'history', label: 'History' },
];

export default async function CompanyPage({ params, searchParams }: { params: Promise<{ slug: string }>; searchParams: Promise<SP> }) {
  const { slug } = await params;
  const sp = await searchParams;
  let c: CompanyDetail;
  try {
    c = await api.company(slug);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
  const requested = str(sp.tab) ?? 'overview';
  const tab = TABS.some((t) => t.id === requested) ? requested : 'overview';
  const tabs = TABS.map((t) => ({ ...t, count: t.id === 'jobs' ? c.counts.jobs_open : t.id === 'sources' ? c.counts.sensors : t.id === 'signals' ? c.signals?.length || undefined : undefined }));
  // Products tab fallback: Wikidata "product or material produced" statements, with the provenance of that field.
  const wdProducts = c.profile?.products ?? [];
  const wdSrc = sourceFor(c.profile, 'products');
  const wdSource = wdSrc ? { url: wdSrc.url, retrieved_at: wdSrc.retrieved_at } : c.profile?.wikidata_url ? { url: c.profile.wikidata_url, retrieved_at: c.profile.enriched_at ?? '' } : null;

  return (
    <Container wide>
      <CompanyHeader c={c} />
      <MetricTiles c={c} />
      <DensityStrip c={c} />
      <Suspense>
        <Tabs tabs={tabs} className="mt-4" sticky>
          <TabPanel id={tab}>
            {tab === 'overview' && <Overview c={c} />}
            {tab === 'timeline' && <TimelinePanel slug={c.slug} data={await safe(api.companyTimeline(c.slug, str(sp.filter) ?? 'all'))} filter={str(sp.filter) ?? 'all'} />}
            {tab === 'signals' && <SignalsPanel signals={c.signals ?? []} />}
            {tab === 'jobs' && <JobsPanel slug={c.slug} data={await safe(api.companyJobs(c.slug, { status: str(sp.status) ?? 'open', ai: bool(sp.ai) ? 1 : undefined, per_page: 50, page: str(sp.page) }))} status={str(sp.status) ?? 'open'} ai={bool(sp.ai)} />}
            {tab === 'products' && <ProductsPanel data={await safe(api.companyProducts(c.slug))} wikidataProducts={wdProducts} wikidataSource={wdSource} />}
            {tab === 'pricing' && <PricingPanel data={await safe(api.companyPricing(c.slug))} />}
            {tab === 'locations' && <Locations slug={c.slug} />}
            {tab === 'leadership' && <PeoplePanel data={await safe(api.companyPeople(c.slug))} />}
            {tab === 'sources' && <Sources c={c} />}
            {tab === 'history' && <HistoryPanel data={await safe(api.companyHistory(c.slug))} />}
          </TabPanel>
        </Tabs>
      </Suspense>
      <div className="mt-10 flex flex-wrap items-center justify-between gap-3 border-t border-rule pt-5">
        <p className="text-sm text-ink-2">Compare {c.display_name} with peers on activity, hiring, product velocity, AI adoption, locations and events.</p>
        <Link href={routes.compare([c.slug])} className="btn">
          <GitCompareArrows className="size-4" aria-hidden /> Compare companies
        </Link>
      </div>
    </Container>
  );
}

async function Overview({ c }: { c: CompanyDetail }) {
  const [events, similar, metrics] = await Promise.all([safe(api.companyEvents(c.slug, { per_page: 10 })), safe(api.companySimilar(c.slug, 8)), safe(api.companyMetrics(c.slug, 90))]);
  const surfaces = Object.entries(c.sensors_by_surface ?? {}).sort((a, b) => b[1] - a[1]);
  const series = metrics?.series ?? {};
  const lines = (['activity_score', 'product_velocity', 'ai_adoption'] as const).filter((k) => (series[k]?.length ?? 0) > 1).map((k) => ({ id: k, label: humanize(k), points: series[k]!.map((p) => ({ day: p.day, value: p.value })) }));
  return (
    <div className="grid gap-8 lg:grid-cols-12">
      <div className="space-y-8 lg:col-span-8">
        <KeyFactsPanel c={c} />
        <section>
          <p className="eyebrow mb-2">Latest structured events</p>
          {events ? <EventList events={events.items} variant="table" showCompany={false} emptyLabel="No structured events detected for this company yet — sensors are attached and observing." /> : <Empty title="Events temporarily unavailable." />}
          {events && events.total > 10 && (
            <p className="mt-2 text-sm">
              <Link href={routes.company(c.slug, 'timeline')} className="link">
                Full timeline ({events.total} events) →
              </Link>
            </p>
          )}
        </section>
        <section>
          <p className="eyebrow mb-2">90-day metric series</p>
          {lines.length ? <LineChart series={lines} height={200} yZero /> : <Empty compact title="Not enough history for a series yet." />}
        </section>
        {c.signals?.length > 0 && (
          <section>
            <p className="eyebrow mb-2">Active signals</p>
            <SignalsPanel signals={c.signals.slice(0, 3)} />
          </section>
        )}
      </div>
      <aside className="space-y-8 lg:col-span-4">
        <section>
          <p className="eyebrow mb-2">Identity</p>
          <KV>
            <Row k="Legal name">{c.legal_name ?? '—'}</Row>
            <Row k="Domains">
              {c.domains?.length ? (
                <span className="mono text-xs">
                  {c.domains.map((d) => (
                    <span key={d.domain} className="block">
                      {d.domain} <span className="text-ink-3">· {d.kind}</span>
                    </span>
                  ))}
                </span>
              ) : (
                <span className="mono text-xs">{c.canonical_domain}</span>
              )}
            </Row>
            {c.aliases?.length > 0 && <Row k="Aliases">{c.aliases.join(', ')}</Row>}
            <Row k="Status">
              <Chip>{c.status.toLowerCase().replace(/_/g, ' ')}</Chip>
            </Row>
            <Row k="Importance">
              <span className="tnum">
                {c.importance} · tier {c.tier}
              </span>
            </Row>
            <Row k="Coverage">
              <span className="tnum">
                {fmtPct(c.coverage?.historical_coverage, 0)} · {c.coverage?.days_observed ?? '—'} days observed
                {c.coverage?.first_observed_at ? ` · since ${fmtDate(c.coverage.first_observed_at)}` : ''}
              </span>
            </Row>
            {c.coverage?.sensor_uptime !== null && c.coverage?.sensor_uptime !== undefined && (
              <Row k="Sensor uptime">
                <span className="tnum">{fmtPct(c.coverage.sensor_uptime, 1)}</span>
              </Row>
            )}
          </KV>
        </section>
        <CorporateStructurePanel relationships={c.relationships ?? []} />
        <section>
          <p className="eyebrow mb-2">Sensors by surface</p>
          {surfaces.length ? <Bars dense rows={surfaces.map(([s, n]) => ({ key: s, label: SURFACE_LABELS[s] ?? s, value: n }))} /> : <Empty compact />}
          <p className="mt-1 text-xs">
            <Link href={routes.company(c.slug, 'sources')} className="link">
              All sensors →
            </Link>
          </p>
        </section>
        <section>
          <p className="eyebrow mb-2">Similar companies</p>
          {similar ? <CompanyMiniList items={similar.items} metric="activity_score" label="activity" /> : <Empty compact />}
        </section>
        <ConfidenceLegend />
      </aside>
    </div>
  );
}

async function Locations({ slug }: { slug: string }) {
  const data = await safe(api.companyLocations(slug));
  const buckets: MapBucket[] = (data?.items ?? []).filter((l) => l.status === 'listed' && l.lat !== null && l.lon !== null).map((l) => ({ lat: l.lat as number, lon: l.lon as number, country: l.country ?? '', city: l.city, companies: 1, events_30d: 1, jobs_open: 0, top: [] }));
  return <LocationsPanel data={data} map={buckets.length ? <WorldMap buckets={buckets} metric="companies" interactive={false} highlight={[...new Set(buckets.map((b) => b.country))]} /> : <Note>No geocoded locations to draw yet.</Note>} />;
}

async function Sources({ c }: { c: CompanyDetail }) {
  const data = await safe(api.companySensors(c.slug));
  if (!data) return <Empty title="Sensors temporarily unavailable." />;
  const items = [...data.items].sort((a, b) => (a.status === b.status ? b.event_count - a.event_count : a.status === 'active' ? -1 : 1));
  return (
    <div className="space-y-3">
      <Note>
        Every fact on this profile traces back to one of these sensors. A sensor is a deployed connector watching one public URL on a schedule (tier A = 5–15 min … E = 3–7 days). Open a sensor for its observations, snapshots and changes.
      </Note>
      <SensorsTable items={items} />
    </div>
  );
}